<template>
  <div class="myHomeSpecial">
    <!-- 首页底部最新专题 -->
    <div class="myHomeSpecials center">
      <my-title name="最新专题">
        <template #button>
          <router-link class="green" to="/"
            >查看更多 <i class="iconfont icon-xiangyoujiantou"></i
          ></router-link>
        </template>
      </my-title>
      <div class="special-item">
        <div class="item_list" v-for="item in specialData" :key="item.id">
          <my-special-card
            :img="item.cover"
            :title="item.title"
            :desc="item.summary"
            :watchs="item.viewNum"
            :like="item.collectNum"
            :news="item.replyNum"
            :price="item.lowestPrice"
          ></my-special-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getHomeSpecial } from "@/api/home/home";
import myTitle from "@/components/communal/myTitle";
import mySpecialCard from "@/components/communal/mySpecialCard";
export default {
  props: {},
  name: "myHomeSpecial",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      specialData: [],
    });
    getHomeSpecial().then((res) => {
      data.specialData = res.result;
    });
    return { ...toRefs(data) };
  },
  components: {
    myTitle,
    mySpecialCard,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myHomeSpecial {
  width: 100%;
  background-color: #f5f5f5;
  .myHomeSpecials {
    width: 1240px;
    margin: 0 auto;

  }

  .special-item {
    display: flex;
    justify-content: space-between;
    .item_list {
      width: 404px;
    }
  }
}
</style>